<template>
    <view class="margin-sm" style="position: relative; z-index: 999">
        <view class="bg flex padding-lr-base radius-xl align-center text-white justify-between">
            <view>余额</view>
            <view class="flex align-center">
                <view class="margin-right-sm">
                    <text class="">￥</text>
                    <text class="text-lg">{{ data.money ? data.money : "0.00" }}</text>
                </view>
                <view class="cuIcon-right text-lg text-white"></view>
            </view>
        </view>
    </view>

    <view class="margin-lr-sm margin-tb-base bg-white radius-xl padding-base">
        <view class="grid bg-white col-4">
            <view class="text-center">
                <view class="text-lg text-red">
                    <text style="font-size: 24rpx">￥</text>
                    {{ data.money_share ? data.money_share : "0.00" }}
                </view>
                <view>我的钱包</view>
            </view>
            <view class="text-center">
                <view class="text-lg text-red">{{ data.coupon_num ? data.coupon_num : 0 }}</view>
                <view>优惠券</view>
            </view>
            <view class="text-center">
                <view class="text-lg text-red">{{ data.hongbao_num ? data.hongbao_num : 0 }}</view>
                <view>红包</view>
            </view>
            <view class="text-center">
                <view class="text-lg text-red">{{ memberStore.userInfo.gift_card_num ? memberStore.userInfo.gift_card_num : 0 }}</view>
                <view>礼品卡</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useMemberStore } from "@/store/module/member";

const memberStore = useMemberStore();

const props = withDefaults(defineProps<{ data: AnyObject }>(), {
    data: () => ({})
});
</script>

<style scoped lang="scss">
.bg {
    background-color: #333;
    height: 100rpx;
}
</style>
